import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withConsumer } from '../../context';
import styles from './index.module.scss';
import classNames from 'classnames';
import { update } from '@/utils/immutableUtil';

import CodePreview from './CodePreview';
import PPTPreview from './PPTPreview';

@withConsumer
@connect(({ ppt }) => ({
  openPreview: ppt.openPreview,
  previewType: ppt.previewType,
}))
class Comp extends Component {
  shouldComponentUpdate = (np, ns) => update.call(this, np, ns);
  render() {
    const { openPreview, previewType } = this.props;
    return (
        <div
          className={classNames([
            styles.preview,
            openPreview ? styles.previewOpen : '',
          ])}
        >
          {openPreview && (
            <>
              {['e2b', 'iframe'].includes(previewType) && <CodePreview />}
              {['ppt'].includes(previewType) && <PPTPreview />}
            </>
          )}
        </div>
    );
  }
}

export default Comp;
